<!DOCTYPE html>
<html>
<head>

        <meta charset="utf-8" />

        <title>头像</title>

        <link href="bootstrap.css" rel="stylesheet">

	<style>
        html {width: 100%;}
		body {
            width:100%;
            margin:0;
		}
        .img_profile{
            width:100%;
        }

        .text_profile{
            padding-top:100px;
            padding-bottom:30px;
            font-size:80pt;
            text-align: center;
            font-weight:bold;
        }

        .fill {
            overflow: hidden;
            background-size: cover;
            background-position: center;
            /*background-image: url('path/to/image.jpg');*/
        }

	</style>


	<script src="/lib/socket.io.js"></script>
    <script src="/lib/moment.min.js"></script>
    <script src="/lib/jquery-2.1.4.min.js"></script>
    <script src="/js/app.js"></script>

	<script>

        var socket =  io.connect(ServerUrl);

        socket.on('connect', function() {
            console.log("Client has connected to the server!");
        });

        socket.on('face', function(data) {

            var id = getUrlParms("id");

            var faces = data.result.faces;

            var faceCount = faces.length > FaceCount ? FaceCount : faces.length;

            if(faces.length == 0){

            }
            else if(id < faceCount)
            {
                var face = faces[id];

                $('#img_profile').attr('src',ResUrl + faces[id].face_photo);
                $('#').text();

                var emotion = faces[id].attributes.emotion;
                if(emotion.surprise > 60){
                    $('#text_profile').text("惊讶");
                }
                else if(emotion.happiness > 60){
                    $('#text_profile').text("高兴");
                }
                else if(emotion.neutral > 60){
                    $('#text_profile').text("平静");
                }
                else if(emotion.sadness > 60){
                    $('#text_profile').text("伤心");
                }
                else if(emotion.disgust > 60){
                    $('#text_profile').text("厌恶");
                }
                else if(emotion.anger > 60){
                    $('#text_profile').text("生气");
                }
                else if(emotion.fear > 60){
                    $('#text_profile').text("惊恐");
                }else{
                    $('#text_profile' ).text("平静");
                }

            }
        });

        socket.on('disconnect', function() {
            console.log("The client has disconnected!");
        });

        function sendDisconnect() {
            socket.disconnect();
        }

        function sendMessage() {
            var jsonObject = {};
            socket.emit('mosaic-template', jsonObject);
        }




	</script>
</head>

<body>

    <div id="text_profile" class="text_profile"></div>
    <img id="img_profile" class="img_profile"></img>

</body>

</html>
